npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // Bir sahifali ilova marshrutizatsiyasi uchun
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Masofaviy ilovalarni bu yerda belgilang, masalan: 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Boshqa umumiy bog'liqliklarni bu yerga qo'shing
 },
 }),
 // ... boshqa plaginlar
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // Bir sahifali ilova marshrutizatsiyasi uchun
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Boshqa ochilgan modullarni bu yerga qo'shing
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Boshqa umumiy bog'liqliklarni bu yerga qo'shing
 },
 }),
 // ... boshqa plaginlar
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Masofaviy Vidjet
  
Bu RemoteApp'dan olingan vidjet.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Xost ilova
  
Bu xost ilova.
  {isWidgetLoaded ? (
   Vidjet yuklanmoqda...
}>
   
   
  ) : (
   
Yuklanmoqda...
  )}
  

Tushuntirish:

• React.lazy(() => import('RemoteApp/Widget')): Bu RemoteAppdan Widget modulini dinamik ravishda import qiladi. RemoteApp nomi xostning Webpack konfiguratsiyasining remotes bo'limida belgilangan nomga mos keladi. Widget masofaviy ilovaning Webpack konfiguratsiyasining exposes bo'limida belgilangan modul nomiga mos keladi.
• React.Suspense: Bu masofaviy modulning asinxron yuklanishini boshqarish uchun ishlatiladi. fallback prop modul yuklanayotganda ko'rsatiladigan komponentni belgilaydi.

6. Ilovalarni ishga tushiring:

Ham xost, ham masofaviy ilovalarni npm start (yoki siz afzal ko'rgan usul) yordamida ishga tushiring. Masofaviy ilova xost ilovadan *oldin* ishga tushirilganligiga ishonch hosil qiling.

Endi siz xost ilova ichida masofaviy vidjetning ko'rsatilganini ko'rishingiz kerak.

Ilg'or Module Federation texnikalari

Asosiy sozlamalardan tashqari, Module Federation murakkab mikro-frontend arxitekturalarini yaratish uchun bir nechta ilg'or texnikalarni taklif qiladi.

1. Versiyalarni boshqarish va almashish:

Umumiy bog'liqliklarni samarali boshqarish barqarorlikni saqlash va ziddiyatlarning oldini olish uchun juda muhimdir. Module Federation umumiy modullarning versiya diapazonlari va singleton nusxalarini belgilash mexanizmlarini taqdim etadi. Webpack konfiguratsiyasida shared xususiyatidan foydalanish sizga umumiy modullarning qanday yuklanishi va boshqarilishini nazorat qilish imkonini beradi.

Misol:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Modulning faqat bitta nusxasi yuklanishini ta'minlaydi, bu takrorlanishning oldini oladi va paket hajmini kamaytiradi. Bu ayniqsa React va ReactDOM kabi kutubxonalar uchun muhim.
• requiredVersion: Ilova talab qiladigan versiya diapazonini belgilaydi. Webpack modulning mos keladigan versiyasini yuklashga harakat qiladi.
• eager: true: Modulni dangasalik bilan emas, balki darhol yuklaydi. Bu ba'zi hollarda samaradorlikni oshirishi mumkin, lekin dastlabki paket hajmini ham oshirishi mumkin.

2. Dinamik Module Federation:

Masofaviy ilovalarning URL manzillarini qattiq kodlash o'rniga, ularni konfiguratsiya faylidan yoki API endpointidan dinamik ravishda yuklashingiz mumkin. Bu sizga mikro-frontend arxitekturasini xost ilovani qayta joylashtirmasdan yangilash imkonini beradi.

Misol:

Masofaviy ilovalarning URL manzillarini o'z ichiga olgan konfiguratsiya faylini yarating (masalan, remote-config.json):

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

Xost ilovada konfiguratsiya faylini oling va remotes obyektini dinamik ravishda yarating:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... boshqa konfiguratsiyalar
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('remote-config.json o`qishda xatolik:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('remote-config.json`ni tahlil qilishda xatolik:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Boshqa umumiy bog'liqliklarni bu yerga qo'shing
 },
 }),
 // ... boshqa plaginlar
 ],
};

            

              
                Copy
              
            
          

Muhim eslatma: Ishlab chiqarish muhitida masofaviy konfiguratsiyani olish uchun yanada ishonchli usuldan foydalanishni o'ylab ko'ring, masalan, API endpointi yoki maxsus konfiguratsiya xizmati. Yuqoridagi misol soddalik uchun fs.readFiledan foydalanadi, ammo bu odatda ishlab chiqarish joylashtirishlari uchun mos emas.

3. Maxsus yuklash strategiyalari:

Module Federation sizga masofaviy modullarning qanday yuklanishini sozlash imkonini beradi. Siz samaradorlikni optimallashtirish yoki CDNdan modullarni yuklash yoki service worker'dan foydalanish kabi maxsus stsenariylarni boshqarish uchun maxsus yuklash strategiyalarini amalga oshirishingiz mumkin.

Webpack modul yuklash jarayonini to'xtatish va o'zgartirish imkonini beruvchi hook'larni ochadi. Bu masofaviy modullarning qanday olinishi va ishga tushirilishi ustidan nozik nazoratni ta'minlaydi.

4. CSS va uslublarni boshqarish:

Mikro-frontendlar o'rtasida CSS va uslublarni almashish qiyin bo'lishi mumkin. Module Federation uslublarni boshqarish uchun turli yondashuvlarni qo'llab-quvvatlaydi, jumladan:

• CSS modullari: Har bir mikro-frontend ichida uslublarni inkapsulyatsiya qilish, ziddiyatlarning oldini olish va izchillikni ta'minlash uchun CSS modullaridan foydalaning.
• Styled Components: Komponentlarning o'zida uslublarni boshqarish uchun styled components yoki boshqa CSS-in-JS kutubxonalaridan foydalaning.
• Global uslublar: Global uslublarni umumiy kutubxona yoki CDNdan yuklang. Bu yondashuvdan ehtiyot bo'ling, chunki uslublar to'g'ri nomlanmagan bo'lsa, ziddiyatlarga olib kelishi mumkin.

CSS modullari yordamida misol:

Webpackni CSS modullaridan foydalanish uchun sozlang:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... boshqa qoidalar
],
}

            

              
                Copy
              
            
          

Komponentlaringizda CSS modullarini import qiling:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Masofaviy Vidjet
  
Bu RemoteApp'dan olingan vidjet.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Mikro-frontendlar o'rtasidagi aloqa:

Mikro-frontendlar ko'pincha ma'lumot almashish yoki harakatlarni ishga tushirish uchun bir-biri bilan aloqa qilishlari kerak. Bunga erishishning bir necha yo'li mavjud:

• Umumiy hodisalar: Hodisalarni e'lon qilish va obuna bo'lish uchun global hodisa shinasi (event bus)dan foydalaning. Bu mikro-frontendlarga to'g'ridan-to'g'ri bog'liqliklarsiz asinxron ravishda aloqa qilish imkonini beradi.
• Maxsus hodisalar: Bir sahifadagi mikro-frontendlar o'rtasidagi aloqa uchun maxsus DOM hodisalaridan foydalaning.
• Umumiy holatni boshqarish: Holatni markazlashtirish va ma'lumotlar almashinuvini osonlashtirish uchun umumiy holatni boshqarish kutubxonasidan (masalan, Redux, Zustand) foydalaning.
• To'g'ridan-to'g'ri modul importlari: Agar mikro-frontendlar bir-biriga qattiq bog'langan bo'lsa, Module Federation yordamida bir-biridan modullarni to'g'ridan-to'g'ri import qilishingiz mumkin. Biroq, mikro-frontendlarning afzalliklariga putur yetkazadigan bog'liqliklarni yaratmaslik uchun bu yondashuvni kamdan-kam ishlatish kerak.
• API'lar va xizmatlar: Mikro-frontendlar bir-biri bilan API'lar va xizmatlar orqali aloqa qilishi mumkin, bu esa erkin bog'liqlik va katta moslashuvchanlikni ta'minlaydi. Bu, ayniqsa, mikro-frontendlar turli domenlarda joylashtirilgan yoki turli xavfsizlik talablariga ega bo'lganda foydalidir.

Mikro-frontendlar uchun Module Federationdan foydalanishning afzalliklari

• Yaxshilangan masshtablanuvchanlik: Mikro-frontendlar mustaqil ravishda masshtablanishi mumkin, bu esa resurslarni eng kerakli joyga yo'naltirish imkonini beradi.
• Oshirilgan qo'llab-quvvatlanuvchanlik: Kichikroq kod bazalarini tushunish va qo'llab-quvvatlash osonroq, bu xatoliklar xavfini kamaytiradi va dasturchi unumdorligini oshiradi.
• Tezroq joylashtirish sikllari: Mikro-frontendlar mustaqil ravishda joylashtirilishi mumkin, bu esa tezroq iteratsiya sikllarini va yangi xususiyatlarni tezroq chiqarish imkonini beradi.
• Texnologik xilma-xillik: Jamoalar o'z ehtiyojlariga eng mos keladigan texnologiyalar va freymvorklarni tanlashi mumkin, bu esa innovatsiyalarni rag'batlantiradi va maxsus ko'nikmalardan foydalanishga imkon beradi.
• Kengaytirilgan jamoa avtonomiyasi: Har bir mikro-frontend maxsus jamoaga tegishli bo'lib, bu egalik va mas'uliyatni oshiradi.
• Soddalashtirilgan ishga tushirish: Yangi dasturchilar kichikroq, boshqarilishi osonroq kod bazalarini tezda o'zlashtirishi mumkin.

Module Federationdan foydalanishning qiyinchiliklari

• Oshirilgan murakkablik: Mikro-frontend arxitekturalari an'anaviy monolit arxitekturalarga qaraganda murakkabroq bo'lishi mumkin va puxta rejalashtirish hamda muvofiqlashtirishni talab qiladi.
• Umumiy bog'liqliklarni boshqarish: Umumiy bog'liqliklarni boshqarish qiyin bo'lishi mumkin, ayniqsa turli mikro-frontendlar bir xil kutubxonaning turli versiyalaridan foydalanganda.
• Aloqa uchun qo'shimcha xarajatlar: Mikro-frontendlar o'rtasidagi aloqa qo'shimcha xarajatlar va kechikishlarni keltirib chiqarishi mumkin.
• Integratsion testlash: Mikro-frontendlarning integratsiyasini testlash monolit ilovani testlashdan ko'ra murakkabroq bo'lishi mumkin.
• Dastlabki sozlash uchun qo'shimcha xarajatlar: Module Federationni sozlash va dastlabki infratuzilmani o'rnatish sezilarli harakat talab qilishi mumkin.

Haqiqiy dunyo misollari va foydalanish holatlari

Module Federation katta va murakkab veb-ilovalar yaratish uchun tobora ko'proq kompaniyalar tomonidan qo'llanilmoqda. Mana bir nechta haqiqiy dunyo misollari va foydalanish holatlari:

• Elektron tijorat platformalari: Yirik elektron tijorat platformalari ko'pincha veb-saytning turli qismlarini, masalan, mahsulotlar katalogi, xarid savati va to'lov jarayonini boshqarish uchun mikro-frontendlardan foydalanadi. Masalan, nemis riteyleri nemis tilidagi mahsulotlarni ko'rsatish uchun alohida mikro-frontenddan foydalanishi mumkin, fransuz riteyleri esa fransuz mahsulotlari uchun boshqa mikro-frontenddan foydalanadi va ikkalasi ham bitta xost ilovaga birlashtiriladi.
• Moliyaviy muassasalar: Banklar va moliyaviy muassasalar onlayn bank portallari, investitsiya platformalari va savdo tizimlari kabi murakkab bank ilovalarini yaratish uchun mikro-frontendlardan foydalanadi. Global bank turli mamlakatlardagi jamoalarga ega bo'lishi mumkin, ular turli mintaqalar uchun mikro-frontendlar ishlab chiqadi, har biri mahalliy qoidalar va mijozlar afzalliklariga moslashtirilgan.
• Kontentni boshqarish tizimlari (CMS): CMS platformalari foydalanuvchilarga o'z veb-saytlarining ko'rinishi va funksionalligini sozlash imkonini berish uchun mikro-frontendlardan foydalanishi mumkin. Masalan, Kanadadagi CMS xizmatlarini taqdim etuvchi kompaniya foydalanuvchilarga o'z veb-saytlariga turli mikro-frontendlarni (vidjetlarni) qo'shish yoki olib tashlash orqali uning funksionalligini sozlashga imkon berishi mumkin.
• Boshqaruv panellari va tahlil platformalari: Mikro-frontendlar boshqaruv panellari va tahlil platformalarini yaratish uchun juda mos keladi, bu yerda turli jamoalar turli vidjetlar va vizualizatsiyalar bilan hissa qo'shishi mumkin.
• Sog'liqni saqlash ilovalari: Sog'liqni saqlash provayderlari bemor portallari, elektron sog'liqni saqlash yozuvlari (EHR) tizimlari va telemeditsina platformalarini yaratish uchun mikro-frontendlardan foydalanadi.

Module Federationni amalga oshirish bo'yicha eng yaxshi amaliyotlar

Module Federationni muvaffaqiyatli amalga oshirish uchun ushbu eng yaxshi amaliyotlarga rioya qiling:

• Puxta rejalashtiring: Boshlashdan oldin, mikro-frontend arxitekturangizni puxta rejalashtiring va turli ilovalar o'rtasidagi aniq chegaralarni belgilang.
• Aniq aloqa kanallarini o'rnating: Turli mikro-frontendlar uchun mas'ul bo'lgan jamoalar o'rtasida aniq aloqa kanallarini o'rnating.
• Joylashtirishni avtomatlashtiring: Mikro-frontendlarni tez va ishonchli joylashtirishni ta'minlash uchun joylashtirish jarayonini avtomatlashtiring.
• Samaradorlikni kuzatib boring: Har qanday to'siqlarni aniqlash va bartaraf etish uchun mikro-frontend arxitekturangizning samaradorligini kuzatib boring.
• Mustahkam xatoliklarni qayta ishlashni amalga oshiring: Kaskadli nosozliklarning oldini olish va ilovaning barqarorligini ta'minlash uchun mustahkam xatoliklarni qayta ishlashni amalga oshiring.
• Izchil kod uslubidan foydalaning: Qo'llab-quvvatlanuvchanlikni yaxshilash uchun barcha mikro-frontendlar bo'ylab izchil kod uslubini qo'llang.
• Hamma narsani hujjatlashtiring: Tizimning yaxshi tushunilishi va qo'llab-quvvatlanishini ta'minlash uchun arxitekturangizni, bog'liqliklaringizni va aloqa protokollaringizni hujjatlashtiring.
• Xavfsizlik oqibatlarini hisobga oling: Mikro-frontend arxitekturangizning xavfsizlik oqibatlarini diqqat bilan ko'rib chiqing va tegishli xavfsizlik choralarini amalga oshiring. GDPR va CCPA kabi global ma'lumotlar maxfiyligi qoidalariga rioya qilinishini ta'minlang.

Xulosa

Webpack 5 bilan JavaScript Module Federation mikro-frontend arxitekturalarini yaratishning kuchli va moslashuvchan usulini taqdim etadi. Katta ilovalarni kichikroq, mustaqil joylashtiriladigan birliklarga bo'lish orqali siz masshtablanuvchanlikni, qo'llab-quvvatlanuvchanlikni va jamoa avtonomiyasini yaxshilashingiz mumkin. Mikro-frontendlarni amalga oshirish bilan bog'liq qiyinchiliklar mavjud bo'lsa-da, afzalliklar ko'pincha xarajatlardan ustun turadi, ayniqsa murakkab veb-ilovalar uchun. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz o'z tashkilotingiz va butun dunyodagi foydalanuvchilarning ehtiyojlariga javob beradigan mustahkam va masshtablanuvchi mikro-frontend arxitekturalarini muvaffaqiyatli yaratish uchun Module Federationdan foydalanishingiz mumkin.